<template>
  <view class="tree-container">
    <!-- 树节点递归组件 -->
<!--    <tree-node 
      :nodes="treeData" 
      :depth="0"
      :selected-key="selectedKey"
      @toggle="handleToggle"
      @select="handleSelect"
    /> -->
    
    <uni-collapse ref="collapse" type="line" v-model="fileKey" @change="changeFile">
      <uni-collapse-item  :title="item.label" v-for="(item,index) in arrFileData" :key="index" >
        <view class="tree-download" v-for="(k,i) in item.children" :key="i">
          <view @click="downloadFile(k)"> {{ k.title }} </view>
        </view>
      </uni-collapse-item>
    </uni-collapse>
  </view>
</template>

<script setup>
import { onMounted,ref } from 'vue';
import TreeNode from "/components/tree-comp/tree-comp.vue"

// 示例数据
const treeData = ref([
   { label: "市场部", key: "1",
      children: [
        { label: "品牌推广", key: "1-1" },
        { label: "市场调研", key: "1-2" },
        { label: "营销活动", key: "1-3" },
      ]
    },{ label: "技术部", key: "2",
      children: [
        { label: "研发", key: "2-1" },
        { label: "运维", key: "2-2" },
        { label: "技术架构", key: "2-3" }
      ]
  },{ label: "人事部", key: "3",
      children: [
        { label: "薪资绩效", key: "3-1" },
        { label: "招聘", key: "3-2" },
        { label: "人员架构", key: "3-3" }
      ]
  },{ label: "财务部", key: "4",
      children: [
        { label: "会计核算", key: "4-1" },
        { label: "资金管理", key: "4-2" },
        { label: "税务合规", key: "4-3" }
      ]
  },
]);

const fileKey = ref('')
const arrFileData = ref([
  { label: "市场部", key: "1",children: [] },
  { label: "技术部", key: "2",children: [] },
  { label: "人事部", key: "3",children: [] },
  { label: "财务部", key: "4",children: [] },
])
const changeFile = (val)=> {
  console.log('val==>',val);
}


// 选中的节点key
const selectedKey = ref('');

// 处理节点展开/折叠
const handleToggle = (key) => {
  // 递归查找并切换节点的展开状态
  const toggleNode = (nodes) => {
    for (const node of nodes) {
      if (node.key === key) {
        node.expanded = !node.expanded;
        return true;
      }
      if (node.children && toggleNode(node.children)) {
        return true;
      }
    }
    return false;
  };
  
  toggleNode(treeData.value);
};

// 处理节点选中
const handleSelect = (key) => {
  selectedKey.value = key;
  // 可以在这里添加选中后的其他逻辑
};

  const listsData = ref([])
  // const filesData = ref([])
  // 获取列表数据
  const getListData = async (state)=>{
    const { data: res } = await uni.$http.get('/getImageFiles',{ type: 1 })
    if (res.success) {
      listsData.value = res.data
      
      res.data.forEach(k => {
        if(k.treeValue === '1-1') {
          arrFileData.value[0].children.push(k)
        }
        if(k.treeValue === '2-1') {
          arrFileData.value[1].children.push(k)
        }
        if(k.treeValue === '3-1') {
          arrFileData.value[2].children.push(k)
        }
        if(k.treeValue === '4-1') {
          arrFileData.value[3].children.push(k)
        }
      })
    } 
    uni.showToast({ title: res.msg, duration: 3000, icon:'none' }) 
  }
  onMounted(()=>{
    getListData('11')  // 刷新信息
  })

 // 下载
 const downloadFile = (data) => {
   uni.downloadFile({
     url: data.fileUrl,
     success: (res) => {
       if(res.statusCode === 200) uni.showToast({ title: '下载成功', duration: 2000, icon:'none' })
     },
     fail: (res) => {
       uni.showToast({ title: '下载失败', duration: 3000, icon:'none' }) 
     }
   })
 }

</script>

<style scoped>
.tree-container {
  padding: 16px;
  background-color: #f5f7fa;
  border-radius: 8px;
}
.tree-download {
  text-align: center;
  padding: 10px 5px;
  color: #2b62fb;
}
</style>
